:root{
	--color-text: any;
	/* --color-bg:  papayawhip; */
	/* --color-bg-accent: #ecdcc0; */
	--size: clamp(10rem, 1rem + 40vmin, 30rem);
	--gap:  calc(var(--size) / 14);
	--duration: 60s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));
}

@media(prefers-color-scheme: dark){
	:root{
		/* --color-text: papayawhip; */
		/* --color-bg: navy; */
		/* --color-bg-accent: #2626a0; */
	}
}

.marquee{
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	mask-image: linear-gradient(
		var(--mask-direction, to right),
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);
}

.marquee__group{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	/* justify-content: space-around; */
	gap: var(--gap);
	min-width: 100%;
	animation: scroll-x var(--duration) linear infinite;
}

@media(prefers-reduced-motion: reduce){
	.marquee__group{
		animation-play-state: paused;
	}
}

.marquee--vertical{
	--mask-direction: to bottom;
}

.marquee--verical,
.marquee--vertical .marquee__group{
	flex-direction: column;
}

.marquee--vertical .marquee__group{
	animation-name: scroll-y;
}

.marquee--reverse .marquee__group{
	animation-direction: reverse;
	animation-delay: -1s;
}

@keyframes scroll-x{
	from{
		transform: translateX(var(--scroll-start));
	}
	to{
		transform: translateX(var(--scroll-end));
	}
}

@keyframes scroll-y{
	from{
		transform: translateY(var(--scroll-start));
	}
	to{
		transform: translateY(var(--scroll-end));
	}
}

/*ELMENT STYLES*/
.marquee img{
	display: grid;
	place-items: center;
	width: var(--size);
	fill: var(--color-text);
	background: var(--color-bg-accent);
	aspect-ratio: 16/9;
	padding: calc(var(--size) / 10);
	border-radius: 0.5rem;
}

.marquee--vertical img{
	aspect-ratio: 1;
	width: calc(var(--size) / 1.5);
	padding: calc(var(--size) / 6);
}